import React, { memo, useEffect, useState } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { getTopAlbumsAction } from '../../store/actionCreators';

import LJThemeHeaderNormal from "components/theme-header-normal";
import LJAlbumCover from "components/album-cover";
import LJPagination from 'components/pagination';
import {
    TopAlbumWrapper
} from './style';

export default memo(function LJTopAlbum() {
    //props and hooks
    const [currentPage, setCurrentPage] = useState(1);

    //redux hooks
    const { topAlbums, total } = useSelector(state => ({
        topAlbums: state.getIn(["album", "topAlbums"]),
        total: state.getIn(["album", "topTotal"])
    }), shallowEqual);
    const dispatch = useDispatch();

    //other hooks
    useEffect(() => {
        dispatch(getTopAlbumsAction(1));
    }, [dispatch]);

    //other handle
    const onPageChange = (page, pageSize) => {
        setCurrentPage(page);
        dispatch(getTopAlbumsAction(page))
    }

    return (
        <TopAlbumWrapper>
            <LJThemeHeaderNormal title="全部新碟" />
            <div className="album-list">
                {
                    topAlbums.map((item, index) => {
                        return <LJAlbumCover size={130}
                            width={153}
                            bgp={"-845px"}
                            key={item.id}
                            info={item} />
                    })
                }
            </div>
            <LJPagination currentPage={currentPage}
                total={total}
                pageSize={30}
                onPageChange={onPageChange} />
        </TopAlbumWrapper>
    )
})
